<template>
    <el-table class="custom-table" :stripe="props.stripe" style="width: 100%" :key="props.tableKey" v-loading="props.loading" :height="props.height" @row-click="rowClick"
        :class="{ 'custom-table-wrap-no-data': props.tableData.length <= 0 }" :data="props.tableData">
        <slot></slot>
        <template #empty>
            <NoData :show="true"></NoData>
        </template>
    </el-table>
</template>

<script setup>
import NoData from '@/components/no-data.vue';

const emit = defineEmits(['row-click'])

const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    },
    tableKey: { // 设置不同的tablekey 解决tabs下的表格刷新抖动问题，表格不在tabs下不用设置
        type: String,
        default: 'r'
    },
    height: {
        type: [Number, String],
        default: 400
    },
    stripe: {
        type: Boolean,
        default: true
    },
})

function rowClick(row, column, event) {
    emit('row-click', row, column, event);
}

</script>

<style lang="scss" scoped>
.custom-table {
   :deep(th.el-table__cell) {
      background-color: var(--srt-table-header-bg-color);
      height: 40px;
   }
   :deep(td.el-table__cell), :deep(th.el-table__cell.is-leaf) {
      border: none;
   }

   :deep(thead) {
      color: var(--srt-table-header-text-color);
   }
   :deep(tr.el-table__row--striped td.el-table__cell) {
       background: var(--srt-table-stripe-bg-color);
   }
   :deep(tr) {
       height: 42px;
   }
   :deep(.cell) {
       padding: 0px 12px;
   }
}

</style>